const {
    createElement: h,
    useState,
    useRef
} = React


export default function TodoList(props) {
    const [editingId, setEditingId] = useState(-1)
    const [preText, setPreText] = useState('')
    const changeEditing = todo => {
        setEditingId(todo.id)
        setPreText(todo.text)
    }

    const doneEdit = () => {
        setEditingId(-1)
    }
    const escEdit = (todo) => {
        props.changeTodo(todo, {
            ...todo,
            text: preText
        })
        setEditingId(-1)
    }
    return h('ul', {
        className: 'todo-list'
    }, props.todos.map(todo => {
       
        return h('li', {
                className: [todo.completed ? 'completed' : '', editingId === todo.id ? 'editing' : ''].join(' '),
                key: todo.id
            },
            h('div', {
                    className: 'view'
                },
                h('input', {
                    className: 'toggle',
                    type: 'checkbox',
                    checked: todo.completed,
                    onChange(e) {
                        props.changeTodo(
                            todo, {
                                ...todo,
                                completed: e.target.checked
                            }
                        )
                    }
                }),
                h('label', {
                    onDoubleClick: () => {
                        changeEditing(todo)
                        
                    }
                }, todo.text),
                h('button', {
                    className: 'destroy',
                    onClick() {
                        props.removeToto(todo)
                    }

                })
            ),
            h('input', {
                className: 'edit',
                placeholder: 'Create a TodoMVC template',
                value: todo.text,
                onChange(e) {
                    props.changeTodo(
                        todo, {
                            ...todo,
                            text: e.target.value
                        }
                    )
                },
                onKeyDown(e) {
                    if (e.key === 'Enter') {
                        doneEdit()
                    } else if (e.key === 'Escape') {
                        escEdit(todo)
                    }
                },
                onBlur: doneEdit
            }))
    }))
}